<script setup lang="ts">
import { type PropType, ref, computed, watch } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";

interface SupplierData {
  name: string;
  value: number;
}

const props = defineProps({
  data: {
    type: Array as PropType<Array<SupplierData>>,
    default: () => []
  }
});

const { isDark } = useDark();
const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef, {
  theme,
  renderer: "canvas"
});

// 颜色配置
const colors = [
  "#5470c6",
  "#91cc75",
  "#fac858",
  "#ee6666",
  "#73c0de",
  "#3ba272",
  "#fc8452",
  "#9a60b4",
  "#ea7ccc",
  "#ffb6c1"
];

// 更新图表配置
const updateChart = () => {
  setOptions({
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      orient: "vertical",
      left: "left",
      textStyle: {
        color: isDark.value ? "#fff" : "#333"
      }
    },
    series: [
      {
        name: "供货商统计",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["60%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: isDark.value ? "#1f1f1f" : "#fff",
          borderWidth: 2
        },
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: "bold",
            color: isDark.value ? "#fff" : "#333"
          }
        },
        labelLine: {
          show: false
        },
        data: props.data,
        color: colors
      }
    ]
  });
};

// 监听数据变化
watch(() => props.data, updateChart, { deep: true });

// 监听主题变化
watch(theme, updateChart);

// 初始化图表
updateChart();
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 300px" />
</template>
